import React from 'react'
import { Panel, Cell,CellFooter, CellBody, PanelBody, PanelFooter, MediaBox, MediaBoxHeader,
		 MediaBoxDescription, MediaBoxTitle, MediaBoxBody, Button } from 'react-weui'

export default class OrderItem extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			fetched: false,
			goodsList: []
		}
	}
	componentDidMount(){
        this.props.showOrderDetail(this.props.orderId);
        this.setState({
        	fetched: true
        })
	}
	componentWillReceiveProps(nextProps) {
		if(nextProps.detailisFetched == true && this.state.fetched == true && nextProps.orderDetail.order.orderId == this.props.orderId){
			this.setState({
				goodsList: nextProps.orderDetail.goods,
				fetched: false
			})
		}
    }
	render() {
		const { status, pay } = this.props.orderData;
		const { goodsList } = this.state;
		const CellMore = () => (
			<Cell link>
				<CellBody></CellBody>
				<CellFooter >
		            <Button type="default" size="small" style={{border: '1px solid #ccc'}}>删除订单</Button>
		            &nbsp;<Button type="primary" size="small" style={{background: 'orange'}}>{status!=1 ? '查看物流 ': '继续支付'}</Button>
		            &nbsp;{status==4? <Button type="warn" size="small">评价</Button> : null}
				</CellFooter>
			</Cell>
		);
		return (
			<Panel>
				<PanelBody>
					{
						goodsList.map(function(item,i){
							return(
								<MediaBox key={i} type="appmsg" href="javascript:void(0);">
										<MediaBoxHeader><img src={'http://'+item.thumb} /></MediaBoxHeader>
										<MediaBoxBody>
											<MediaBoxTitle>{item.name}</MediaBoxTitle>
											<MediaBoxDescription>
												<div>
													<span>&nbsp;单价：{item.price}</span>
				                                	<span>&nbsp;数量：{item.amount}</span>
												</div>
												<div>
				                                	<span>&nbsp;颜色：
				                                		{item.colorName=='' ?'默认':item.colorName}
				                                	</span>
				                                	<span>&nbsp;尺寸：
				                                		{item.sizeName==''? '默认': item.sizeName}
				                                	</span>
				                                </div>
				                                <div>&nbsp;共计：<span>{item.o_sum}</span></div>
											</MediaBoxDescription>
										</MediaBoxBody>
									</MediaBox>
							)
						})
					}
				</PanelBody>
				<Cell>
                    <CellBody></CellBody>
                    <CellFooter style={{ color: 'orange', fontSize: '1.1em' }}><strong>￥&nbsp;<span>{this.props.orderData.pay}</span></strong></CellFooter>
				</Cell>
 				<PanelFooter href="javascript:void(0);">
					<CellMore />
				</PanelFooter>
			</Panel>
		);
	}
}


